<template>
  <transition name="slide" mode="out-in">
    <button @click='click'>{{text}}</button>
  </transition>
</template>

<script>
export default {
  name: 'asidBtn',
  props: ['text', 'click']
}
</script>

<style lang="scss" scoped>
@import '../scss/mixin.scss';
@import '../scss/_variables.scss';
@import '../scss/fonts.scss';
    button {
      padding: 10px 0;
      cursor: pointer;
      font-size: 16px;
      width: 30px;
      position: absolute;
      top: 0;
      right: -30px;
      z-index: -1;
      background-color: $blue1;
      text-align: center;
      line-height: 1.3;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 10px;
      border-style: none;
      outline: none;
      color: #fff;
      // @extend %yahei;
    }
</style>